<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遍历祖先</title>
		<style>
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<script>
			$(function() {
				//获取当前元素所有的兄弟节点
				//$(".mp").siblings().css("color","red");
				
				//获取当前元素的前一个兄弟节点/后一个兄弟节点
				$(".mp").prev().css("color","red");
				$(".mp").next().css("color","green");
				
				//获取当前元素前面所有的兄弟节点/后面所有的兄弟节点
				//$(".mp").prevAll().css("color","red");
				//$(".mp").nextAll().css("color","green");
				
				//获取当前元素前面/后面所有到指定元素的兄弟节点(不包括)
				//$(".mp").prevUntil("h1").css("color","red");
				//$(".mp").nextUntil("h1").css("color","green");
			});
		</script>
	</head>
	<body>
		<p>这是一个段落</p>
		<h1>abc</h1>
		<p>这是一个段落</p>
		<p>这是一个段落</p>
		<p class="mp">这是一个段落</p>
		<p>这是一个段落</p>
		<p>这是一个段落</p>
		<h1>abc</h1>
		<p>这是一个段落</p>
	</body>
</html>
